<template>
  <div class="dfs_flex" v-if="title">
    <div class="dfsflex">
      <img v-if="url == '01.png'" class="money ml26 ml10" src="../../../assets/image/01.png" />
      <img v-if="url == '02.png'" class="money ml26 ml10" src="../../../assets/image/02.png" />
      <img v-if="url == '03.png'" class="money ml26 ml10" src="../../../assets/image/03.png" />
      <img v-if="url == '04.png'" class="money ml26 ml10" src="../../../assets/image/04.png" />
      <img v-if="url == '05.png'" class="money ml26 ml10" src="../../../assets/image/05.png" />

      
      <div>
        <div class="money_text">{{ money }}</div>

        <div class="money_bottom">{{ title }}</div>
      </div>
    </div>
    <div class="right" v-if="rete">
      <div class="right_top">3.21%</div>
      <div class="right_bottom">
        <div>环比</div>
        <img class="right_img" src="../../../assets/image/top.png" />
      </div>
    </div>
  </div>
</template>
<script>
import CountTo from "vue-count-to";

export default {
  name: "topOne",
  components: { CountTo },
  props: {
    title: {
      type: String,
      default: "",
    },
    money: {
      type: String,
      default: "",
    },
    url: {
      type: String,
      default: "",
    },
    rete: {
      type: String,
      default: "",
    },
  },
  setup() {},
};
</script>
<style scoped>
.money {
  width: 76px;
  height: 76px;
}
.dfsflex {
  display: flex;
  align-items: center;
  width: 100%;
}

.dfs_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
.ml26 {
  margin-left: 26px;
}
.ml10 {
  margin-right: 10px;
}
.money_text {
  font-size: 30px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #6afef9;
}
.money_bottom {
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  text-align: left;
}
.right {
  margin-right: 8px;
}
.right_top {
  font-size: 30px;
  font-weight: 400;
  color: #ff0000;
}
.right_bottom {
  font-size: 16px;
  font-weight: 400;
  color: #ff0000;
  display: flex;
  justify-content: space-between;
}
.right_img {
  width: 20px;
  height: 20px;
}
.card-panel-num {
  font-size: 19px;
  color: #2d3033;
  opacity: 1;
}
</style>
